<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <style>
            div{width: 100px; height: 100px; background-color: gray; line-height: 100px; text-align: center; margin: 20px; padding: 50px}
            div span{width: 100px; height: 100px; background-color: white; display: inline-block}
        </style>
        <script>
            /* 
                
            【注】经过子节点会重复触发。
                mouseover
                mouseout

            【注】经过子节点不会重复触发。IE8以后才有。
                mouseenter
                mouseleave
            
             */

            window.onload = function(){
                var aDivs = document.getElementsByTagName("div");

                var i = 0;
                aDivs[0].onmouseout = function(){
                    var oSpan = this.getElementsByTagName("span")[0];
                    oSpan.innerHTML = i++;
                }

                var j = 0;
                aDivs[1].onmouseleave = function(){
                    var oSpan = this.getElementsByTagName("span")[0];
                    oSpan.innerHTML = j++;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <span>mouseover</span>
        </div>
        <div>
            <span>mouseenter</span>
        </div>
    </body>
</html>